<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(img, index) in bannerImgss" :key="index">
        <img :src="img" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import axios from "axios";
import Swiper from "swiper"; //引入js文件
import "swiper/css/swiper.css"; //引入css文件，背后是webpack的功劳。
export default {
  name: "Luobotu",
  data() {
    return {
      bannerImgss: [],
      mySwiper: null,
    };
  },
  mounted() {
    this.swiper();
    console.log(this.mySwiper);
  },
  methods: {
    swiper() {
      this.mySwiper = new Swiper(".swiper-container", {
        // eslint-disable-line no-unused-vars
        // direction: 'vertical', // 垂直切换选项
        autoplay: true,
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    },
  },
  created() {
    axios({
      url: "http://localhost:3000/bannerImgss",
    }).then((res) => {
      // 把后端的数据赋给了bannerImgs
      console.log(res.data);
      this.bannerImgss = res.data;
      console.log(this.bannerImgss);
    });
  },
};
</script>

<style scoped>
/* @import url("swiper/css/swiper.css"); */
/* @import "../../node-modules/swiper/css/swiper.css" */
.swiper-container {
  width: 100%;
  height: 13rem;
  margin-top: 3rem;
  border-radius: 8px;
}

.swiper-container img {
  width: 100%;
  height: 100%;
}
</style>
